<template>
    <div class="g-sd2">
        <div class="g-wrap4 n-sgernav">
            <h2 class="tit">{{singerNavData.mainTitle}}</h2>
            <ul class="nav clear-block">
                <li v-for="(mainSubTitleItem, index) in singerNavData.mainSubTitleList" key="index">
                    <a :href="mainSubTitleItem.mainSubTitleRoute" class="cat-flag z-slt">{{mainSubTitleItem.mainSubTitle}}</a>
                </li>
            </ul>
            <div class="blk" v-for="(titleItem, index) in singerNavData.titleList" key="index">
                <h2 class="tit">{{ titleItem.title }}</h2>
                <ul class="nav clear-block">
                    <li v-for="(subTitleItem, index) in titleItem.subTitleList" key="index">
                        <a :href="subTitleItem.subTitleRoute" class="cat-flag" :data-cat="subTitleItem.subTitleId">{{subTitleItem.subTitle}}</a>
                    </li>
                </ul>
            </div>
        </div>

    </div>
</template>
<script setup>
    import singerNavData from '@/json_data/artist/singer_nav_data.json'
</script>
<style lang="scss" scoped>
    .n-sgernav{
        margin-top: 51px;
        .tit{
            height: 25px;
            padding-left: 14px;
            font-size: 16px;
            font-family: "Microsoft Yahei";
        }

        li{
            margin-bottom: 2px;
            &,a{
                float: left;
                width: 160px;
                height: 29px;
                line-height: 29px;
            }
            a{
                width: 133px;
                padding-left: 27px;
                background-position: 0 -30px;
                color:#333;
            }

            a.z-slt{
                &:hover,&{
                    background-position: 0 0;
                    text-decoration: none;
                    color: #c20c0c;
                }
            }
        }

        .blk{
            margin: 5px 0 0;
            padding-top: 16px;
            border-top: 1px solid #d3d3d3;
        }
       
    }
</style>